<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会报名信息管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">队伍管理</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="box-top">
                <el-button type="warning" @click="adddialogVisible = true">新增</el-button>
            </div>
            <el-table :data="currentPageData" border stripe>
                <el-table-column prop="tiid" label="编号" width="80">
                </el-table-column>
                <el-table-column prop="tname" label="单位名">
                </el-table-column>
                <el-table-column prop="tshort" label="缩写">
                </el-table-column>
                <el-table-column prop="tcode" label="简称">
                </el-table-column>
                <el-table-column prop="tcity" label="城市">
                </el-table-column>
                <el-table-column prop="taddr" label="地区">
                </el-table-column>
                <el-table-column prop="temail" label="电子邮件">
                </el-table-column>
                <el-table-column prop="tcountry" label="地址">
                </el-table-column>
                <el-table-column label="领队">
                    <template #default="scope">
                        {{ scope.row.leader1 }}
                        <span
                            v-if="scope.row.leader1 !== null && scope.row.leader2 !== null && scope.row.leader1 !== '' && scope.row.leader2 !== ''">,</span>
                        {{ scope.row.leader2 }}
                    </template>
                </el-table-column>
                <el-table-column label="教练员">
                    <template #default="scope">
                        {{ scope.row.instructor1 }}
                        <span
                            v-if="scope.row.instructor1 !== null && scope.row.instructor2 !== null && scope.row.instructor1 !== '' && scope.row.instructor2 !== ''">,</span>
                        {{ scope.row.instructor2 }}
                    </template>
                </el-table-column>
                <el-table-column label="医生">
                    <template #default="scope">
                        {{ scope.row.doctor1 }}
                        <span
                            v-if="scope.row.doctor1 !== null && scope.row.doctor2 !== null && scope.row.doctor1 !== '' && scope.row.doctor2 !== ''">,</span>
                        {{ scope.row.doctor2 }}
                    </template>
                </el-table-column>
                <el-table-column label="工作人员">
                    <template #default="scope">
                        {{ scope.row.staff1 }}
                        <span
                            v-if="scope.row.staff1 !== null && scope.row.staff2 !== null && scope.row.staff1 !== '' && scope.row.staff2 !== ''">,</span>
                        {{ scope.row.staff2 }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                        <el-button type="danger" @click="comdelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total,prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>
        </el-card>
        <!-- 修改页面 -->
        <el-dialog title="单位信息修改" v-model="editdialogVisible" draggable width="50%" :before-close="handleClose">
            <el-form :model="editfrom" label-width="90">
                <div class="toplabel">
                    <span>单位信息</span>
                </div>
                <div class="edit_input">
                    <el-form-item label="编号：">
                        <el-input v-model="editfrom.tiid"></el-input>
                    </el-form-item>
                    <el-form-item label="单位名：">
                        <el-input v-model="editfrom.tname"></el-input>
                    </el-form-item>
                </div>
                <div class="edit_input">
                    <el-form-item label="缩写：">
                        <el-input v-model="editfrom.tshort"></el-input>
                    </el-form-item>
                    <el-form-item label="简称：">
                        <el-input v-model="editfrom.tcode"></el-input>
                    </el-form-item>
                </div>
                <div class="edit_input">
                    <el-form-item label="地址：">
                        <el-input v-model="editfrom.tcountry"></el-input>
                    </el-form-item>
                    <el-form-item label="城市：">
                        <el-input v-model="editfrom.tcity"></el-input>
                    </el-form-item>
                </div>
                <div class="edit_input">
                    <el-form-item label="地区：">
                        <el-input v-model="editfrom.taddr"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input class="areanull"></el-input>
                    </el-form-item>
                </div>
                <div class="toplabel">
                    <span>人员信息</span>
                </div>
                <div class="edit_input">
                    <el-form-item label="领队1：">
                        <el-input v-model="editfrom.leader1"></el-input>
                    </el-form-item>
                    <el-form-item label="领队2：">
                        <el-input v-model="editfrom.leader2"></el-input>
                    </el-form-item>
                </div>
                <div class="edit_input">
                    <el-form-item label="教练1：">
                        <el-input v-model="editfrom.instructor1"></el-input>
                    </el-form-item>
                    <el-form-item label="教练2：">
                        <el-input v-model="editfrom.instructor2"></el-input>
                    </el-form-item>
                </div>
                <div class="edit_input">
                    <el-form-item label="医生1：">
                        <el-input v-model="editfrom.doctor1"></el-input>
                    </el-form-item>
                    <el-form-item label="医生2：">
                        <el-input v-model="editfrom.doctor2"></el-input>
                    </el-form-item>
                </div>
                <div class="edit_input">
                    <el-form-item label="工作人员1：">
                        <el-input v-model="editfrom.staff1"></el-input>
                    </el-form-item>
                    <el-form-item label="工作人员2：">
                        <el-input v-model="editfrom.staff2"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取 消</el-button>
                <el-button type="primary" @click="editComUnitinfo">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 增加页面 -->
        <el-dialog title="新增单位" v-model="adddialogVisible" draggable width="50%" :before-close="addleClose">
            <el-form :model="addfrom" label-width="100" :rules="rules" ref="addForm">
                <div class="toplabel">
                    <span>单位信息</span>
                </div>
                <div class="add_input">
                    <el-form-item prop="tiid" label="编号：">
                        <el-input v-model="addfrom.tiid"></el-input>
                    </el-form-item>
                    <el-form-item prop="tname" label="单位名：">
                        <el-input v-model="addfrom.tname"></el-input>
                    </el-form-item>
                </div>
                <div class="add_input">
                    <el-form-item label="缩写：">
                        <el-input v-model="addfrom.tshort"></el-input>
                    </el-form-item>
                    <el-form-item label="简称：">
                        <el-input v-model="addfrom.tcode"></el-input>
                    </el-form-item>
                </div>
                <div class="add_input">
                    <el-form-item label="地址：">
                        <el-input v-model="addfrom.tcountry"></el-input>
                    </el-form-item>
                    <el-form-item label="城市：">
                        <el-input v-model="addfrom.tcity"></el-input>
                    </el-form-item>
                </div>
                <div class="add_input">
                    <el-form-item label="地区：">
                        <el-input v-model="addfrom.taddr"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input class="areanull"></el-input>
                    </el-form-item>
                </div>
                <div class="toplabel">
                    <span>人员信息</span>
                </div>
                <div class="add_input">
                    <el-form-item label="领队1：">
                        <el-input v-model="addfrom.leader1"></el-input>
                    </el-form-item>
                    <el-form-item label="领队2：">
                        <el-input v-model="addfrom.leader2"></el-input>
                    </el-form-item>
                </div>
                <div class="add_input">
                    <el-form-item label="教练1：">
                        <el-input v-model="addfrom.instructor1"></el-input>
                    </el-form-item>
                    <el-form-item label="教练2：">
                        <el-input v-model="addfrom.instructor2"></el-input>
                    </el-form-item>
                </div>
                <div class="add_input">
                    <el-form-item label="医生1：">
                        <el-input v-model="addfrom.doctor1"></el-input>
                    </el-form-item>
                    <el-form-item label="医生2：">
                        <el-input v-model="addfrom.doctor2"></el-input>
                    </el-form-item>
                </div>
                <div class="add_input">
                    <el-form-item label="工作人员1：">
                        <el-input v-model="addfrom.staff1"></el-input>
                    </el-form-item>
                    <el-form-item label="工作人员2：">
                        <el-input v-model="addfrom.staff2"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addleClose">取 消</el-button>
                <el-button type="primary" @click="addCom">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            compeData: [],
            queryObj: {
                limit: 10,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
            editdialogVisible: false,
            editfrom: {},
            adddialogVisible: false,
            addfrom: {
                tiid: null,
                tname: '',
                tshort: '',
                tcode: '',
                temail: '',
                tcountry: '',
                tcity: '',
                taddr: '',
                leader1: '',
                leader2: '',
                instructor1: '',
                instructor2: '',
                doctor1: '',
                doctor2: '',
                staff1: '',
                staff2: '',
            },
            initialForm: {},
            rules: {
                tiid: [
                    { required: true, message: '请输入编号', trigger: 'blur' },
                ],
                tname: [
                    { required: true, message: '请输入单位名', trigger: 'blur' },
                ],
            }
        }
    },
    created() {
        this.initialForm = { ...this.addfrom }
        this.getComunitinfoList();
    },
    methods: {
        // 查询
        async getComunitinfoList() {
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/team/getmsg');
                if (result.data.code == 0) {
                    this.compeData = result.data.data
                    this.compeData.sort((a, b) => a.tiid - b.tiid)
                    this.total = this.compeData.length
                    this.fetchData()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        // 删除单条数据
        comdelete(e) {
            this.$confirm('此操作将删除改条数据，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                const result = await this.$http.post(this.BACKEND_URL + '/team/deletemsg', e)
                if (result.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getComunitinfoList()
                } else if (result.data.code == 500) {
                    this.$message.error(result.data.msg)
                }
            }).catch(() => {
            });
        },
        // 获取单个数据信息
        async showeditdialog(info) {
            this.editdialogVisible = true
            this.editfrom = info
        },
        async editComUnitinfo() {
            const result = await this.$http.post(this.BACKEND_URL + '/team/updatemsg', this.editfrom)
            if (result.data.code == 0) {
                this.editdialogVisible = false
                this.getComunitinfoList();
                this.$message.success('修改成功')
            } else if (result.data.code == 500) {
                this.getComunitinfoList();
                this.$message.error(result.data.msg)
            }
        },
        cancelEdit() {
            this.editdialogVisible = false
            this.getComunitinfoList()
        },
        handleClose(done) {
            this.getComunitinfoList()
            done()
        },
        // 新增数据
        async addCom() {
            this.$refs.addForm.validate(async (valid) => {
                if (valid) {
                    const result = await this.$http.post(this.BACKEND_URL + '/team/insertmsg', this.addfrom)
                    if (result.data.code == 0) {
                        this.adddialogVisible = false
                        this.getComunitinfoList();
                        this.$message.success('添加成功')
                        this.addfrom = { ...this.initialForm }
                    } else if (result.data.code == 500) {
                        this.addfrom = { ...this.initialForm }
                        this.$message.error(result.data.msg)
                    }
                } else {
                    this.$message.error('请填写必要信息');
                }
            });

        },
        addleClose() {
            this.adddialogVisible = false
            this.addfrom = { ...this.initialForm }
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.compeData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.compeData.slice(startIndex, endIndex);
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.cell) {
    text-align: center;
}

.box-card {
    margin-top: 15px;

    .box-top {
        float: left;
        margin-bottom: 15px;
    }
}

// 新增页面
.add_input {
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit_input {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toplabel {
    color: red;
    font-size: 16px;
    margin-bottom: 10px;
}


.areanull {
    visibility: hidden;
}

.paging {
    margin-top: 15px;
}
</style>
